<template>
  <div>
    <div class="theme-content">
      <div class="theme-content-item padding-20px">
        <div>
          <div style="margin-bottom: 13px">
            <div class="left-title">每日提现上限</div>
            <div v-if="configFlag === 0" class="param-item">每日提现上限(元)：{{quartileFormat(withdrawalData.data.limitPrice) || 0}}</div>
            <el-form v-if="configFlag === 1" ref="withdrawalRef" :model="withdrawalDataRequest.data" :rules="rules" @submit.prevent>
              <el-form-item class="param-item" label="每日提现上限(元)：" prop="limitPrice">
                <el-input v-model="withdrawalDataRequest.data.limitPrice" @input="withdrawalDataRequest.data.limitPrice = onlyNumber(withdrawalDataRequest.data.limitPrice) " placeholder="请输入提现上限金额" />
              </el-form-item>
            </el-form>
            <div>
              <el-button v-hasPermi="[$button.confwithdrawalLimitedit || null]" v-if="configFlag === 0" type="primary" style="margin-top: 20px" @click="editHandle">修改</el-button>
              <el-button v-if="configFlag === 1" type="primary" style="margin-top: 20px" @click="updateHandle">保存</el-button>
              <el-button v-if="configFlag === 1" style="margin-top: 20px" @click="closeHandle" >取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import {withdrawalLimitDetailApi, withdrawalLimitUpdateApi} from './const'
import {ElMessage} from 'element-plus'
import { onlyNumber } from '@/utils/checkInput'
import {quartileFormat} from '@/utils'
import $button from '@/button'
const { proxy } = getCurrentInstance();
const rules = reactive({
  limitPrice: [
    { required: true, message: '请填写金额', trigger: 'blur' },
  ],
})
const withdrawalData = reactive({ data: {} })
const withdrawalDataRequest = reactive({ data: {} })
const configFlag = ref(0)
const getWithdrawalDetail = () => {
  withdrawalLimitDetailApi().then(res => {
    withdrawalData.data = res.data
  })
}
const closeHandle = () => {
  configFlag.value = 0
  withdrawalDataRequest.data = {}
}
const editHandle = () => {
  configFlag.value = 1
  Object.keys(withdrawalDataRequest).forEach((key) => { withdrawalDataRequest[`${key}`] = withdrawalData[`${key}`] })
}
const updateHandle = () => {
  proxy.$refs["withdrawalRef"].validate(valid => {
    if (valid) {
      withdrawalLimitUpdateApi(withdrawalDataRequest.data).then(res => {
        ElMessage.success(res.msg || '操作成功')
        closeHandle()
        getWithdrawalDetail()
      })
    }
  })
}

onMounted(() => {
  // getWithdrawalDetail()
})

watch(
  configFlag,
  (newValue, oldValue) => {
    if (newValue == 0) {
      getWithdrawalDetail();
    }
  },
  { immediate:true }
)

</script>
<style>
.param-item {
  margin-top: 26px;
  font-size: 14px;
}

</style>
